<template>
  <view class="address-wrap">
    <!-- 收货地址信息 -->
    <view
        class="address"
        v-if="address"
      >
        <view class="address-row1">
          {{detailAddress}}
        </view>
        <view class="address-row2">
          <text>{{address.userName}}</text>
          <text>{{address.telNumber}}</text>
        </view>

    </view>
    <!-- 收货地址按钮 -->
    <button
        v-else
        class="address-btn"
        @click="onChooseAddress"
        type="warn"
        plain
      >
        获取用户的收货地址
    </button>
    <view>
      <view>已选商品</view>
      <view class="list">
      <view 
        class="cart-item"
        v-for="item in checkedCartList"
        :key="item.goods_id"
      >
        <!-- 商品图片 -->
        <view class="cart-img">
          <image
            mode="widthFix"
            :src="item.goods_small_logo"
          ></image>
        </view>
        <!-- 商品详情 -->
        <view class="cart-detail">
          <view class="cart-goods-name u-line-2">{{item.goods_name}}</view>
          <view class="cart-goods-info">
            <view class="goods-price">￥{{item.goods_price}}</view>
            <view class="goods-num-tool">
              <view class="num-value">X {{item.nums}}</view>
            </view>
          </view>
        </view>
      </view>
      </view>
    </view>
    <view class="cart-tool">
      <!-- 合计 -->
      <view class="all-price">
        合计:
        <text>￥{{totalPrice}}</text>
      </view>
      <!-- 结算 -->
      <navigator @click="onPay" class="go-pay">去支付({{totalNum}})</navigator>
    </view>
  </view>
</template>


<script>
import {mapGetters} from 'vuex'
import getToekn from '@/utils/getToekn'
export default {
  data() {
    return {
      // 收货地址
      address: null,
    };
  },
  methods: {
    async onChooseAddress() {
      const [err, result] = await uni.chooseAddress({});
      this.address = result;
    },
    async onPay(){
      // 获取token
      const token = await getToekn()
      // 构造 生成订单需要的参数
      const orderParams={
        order_price:this.totalPrice,
        consignee_addr:this.detailAddress,
        goods:this.checkedCartList.map(good=>({
          goods_id:good.goods_id,
          goods_number:good.nums,
          goods_price:good.goods_price
        }))
      }
      // 获取订单编号请求
      const orderResult = await uni.$u.http.post('/my/orders/create', orderParams,{header: {
        Authorization:token
      }})
      const {order_number} = orderResult.message
      // 获取支付参数请求
      const payResult = await uni.$u.http.post('/my/orders/req_unifiedorder',{order_number},{header: {
        Authorization:token
      }})
      const {pay} = payResult.message
      // 调起微信支付
      uni.requestPayment(pay);
    }
  },
  computed: {
    // 详细的收货地址信息
    detailAddress() {
      if (!this.address) return "";
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
    ...mapGetters(['checkedCartList','totalPrice','totalNum'])
  }
};
</script>


<style lang="scss">
.address-wrap {
  .address {
    padding: 20rpx;
    .address-row1 {
      font-weight: 700;
    }
    .address-row2 {
      font-size: 26rpx;
      color: #666;
      text {
        margin-right: 30rpx;
      }
    }
  }

  .address-btn {
    margin-top: 20rpx;
    width: 60%;
  }
  .list{
    padding: 15rpx;
    .cart-item {
      display: flex;
      .cart-chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        checkbox {
        }
      }

      .cart-img {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 80%;
        }
      }

      .cart-detail {
        flex: 4;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .cart-goods-name {
          font-size: 26rpx;
          color: #666;
        }

        .cart-goods-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .goods-price {
            font-size: 26rpx;
            color: #eb4450;
          }

          .goods-num-tool {
            display: flex;

            .num-change {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              border: 1rpx solid #ccc;
              text-align: center;
              line-height: 34rpx;
              font-size: 26rpx;
              color: #666;
            }

            .num-value {
              height: 40rpx;
              margin: 0 20rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 26rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
}
.cart-tool {
  border-top: 1rpx solid #ccc;
  padding: 0 20rpx;
  display: flex;
  height: 83rpx;
  align-items: center;
  color: #666;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  .all-price {
    flex: 1;
    font-size: 26rpx;
    text {
      color: #eb4450;
    }
  }

  .go-pay {
    padding: 0 20rpx;
    height: 52rpx;
    background-color: #ea4350;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26rpx;
    font-size: 22rpx;
  }
}
</style>